<!-- 作业: 完成一个动画效果:
 一个宽高为100px*100px 的矩形方块,在一个宽1000px,高500px的区域(居中效果)内以其左上角为起点,
 在区域内以'>'路线进行移动,交替播放,无限循环。 -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The First Operation</title>
    <style>
        #frame{
            width: 1000px;
            height: 500px;
            /*区域设置*/
            background-image: url(./image/krustyKrab.webp);
            background-size: cover;
            /*背景图片自适应div*/
            position: absolute;
            margin: auto;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            border: 1px solid royalblue;
        }
        #block{
            width: 100px;
            height: 100px;
            position: relative;
            /*矩形方块大小设置*/
            animation-name: moveAnimation;
            animation-iteration-count: infinite;
            /*动画循环播放设置*/
            animation-duration: 16s;
            /*动画时间设置*/
            background-image: url(./image/crabBoss.jpg);
            background-size: contain;
            /*背景图片大小*/
        }
        
        @keyframes moveAnimation{
            0%{
                top: 0px;
                left: 0px;
            }
            25%{
                right: 0px;
                top: 200px;
                left: 90%;
            }
            50%{
                top: 400px;
                left: 0px;
                right: 90%;
            }
            75%{
                top: 200px;
                right: 0px;
                left: 90%;
            }
            100%{
                top: 0px;
                left: 0px;
            }
        }
        /*移动动画*/
    </style>
 </head>
 <body id="ground">
    <div id="frame">
        <div id="block">
        </div>
    </div>
 </body>
 </html>